import React from 'react';
import { observer } from 'mobx-react';
import Tab from 'components/config/tab';
import Transition from 'components/config/transition';
import Events from 'components/config/events';
import css from './index.less';
import PropTypes from 'prop-types';

@observer
export default class BaseConfig extends React.Component {

  static propTypes = {
    mod: PropTypes.object.isRequired,
  };

  // 属性
  renderAttrConfig() {
    return '属性';
  }

  // 动画
  renderTransitionConfig() {
    const props = {
      mod: this.props.mod, // page or img mod etc.
    };
    return <Transition {...props}/>;
  }

  // 事件
  renderEventsConfig() {
    const props = {
      mod: this.props.mod,
    };
    return <Events {...props}/>;
  }

  render() {
    const props = {
      children: [
        {
          title: '属性',
          content: this.renderAttrConfig(),
        },
        {
          title: '事件',
          content: this.renderEventsConfig(),
        },
        {
          title: '动画',
          content: this.renderTransitionConfig(),
        },
      ],
    };
    return (
      <div>
        <div className={css.head}>
          {this.title || 'BaseConfig - 未设置标题'}
        </div>
        <Tab {...props} />
      </div>
    );
  }
}
